<template>

  <div class="search-popup">
    <van-search
      v-model="search_value"
      show-action
      :placeholder="placeholder_Val"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
<!--    @input="onInput"表示输入框内容发生变化时，触发-->

<!--    历史记录页面-->
    <HistorySearch v-if="showSearchView==1"
                   :historyListData="historyListData"
                   :hotdSearchData="hotdSearchData"
                   @tagClick="tagClick"
    ></HistorySearch>
<!--    搜索数据页面-->
    <SearchTipList v-if="showSearchView==2"
                   :searchTipListData="searchTipListData"
                   @tiplistClick="tagClick"
    ></SearchTipList>
<!--    搜索的产品页面-->
    <SearchProducts v-if="showSearchView==3"
                    :filterCategory="filterCategory"
                    :goodsList="goodsList"
                    @categoryChange="categoryChange"
                    @priceChange="priceChange"
    ></SearchProducts>
  </div>
</template>

<script>
import HistorySearch from '@/components/HistorySearch'
import { getProducts, GetSearchPopupData, GetSearchTipList } from '@/request/api'
import SearchTipList from '@/components/SearchTipList'
import SearchProducts from '@/components/SearchProducts'
export default {
  name: 'SearchPopup',
  components: { SearchProducts, SearchTipList, HistorySearch },
  data () {
    return {
      placeholder_Val:'',     //提示文本
      search_value:'',      //搜索文本框文本
      showSearchView:1,     //  1为历史记录和人们搜索，2位搜索提示，3位搜索的产品
      historyListData:[] ,   //历史搜索记录
      hotdSearchData:[],
      searchTipListData:[],   //实时搜索关联数据
      filterCategory:[],      //搜索产品的分类数据
      goodsList:[],           //搜索到的产品内容列表数据
      order:'desc',           //价格排序
      categoryId:0,           //分类id
      sort:'id',              //默认的搜索方式，是id还是price

    }
  },
  created () {
    this.getSearchPupupData()
  },
  computed: {},
  methods: {
    // 子组件方法，点击热门词条搜索
    // 子组件方法,点击历史和热门标签，进行搜素
    tagClick(val){
      this.search_value=val
      this.onSearch(val)
    },
    // 子组件方法,分类排序
    categoryChange(val){
      // 修改筛选字段的id
      this.categoryId=val
      // 修改了筛选字段，重新调用搜索方法
      this.onSearch(this.search_value)
    },
    // 子组件方法,价格排序
    priceChange(val){
      // val 为desc或esc
      this.order=val
      this.sort='price'
      this.onSearch(this.search_value)
    },
    // 在搜索点击确认是触发
    onSearch(val){
      this.showSearchView=3
      getProducts({
        keyword:val,
        page:1,
        size:10,
        order:this.order,
        categoryId:this.categoryId,
        sort:this.sort,
      }).then(res=>{
        this.filterCategory=res.data.filterCategory
        this.goodsList=res.data.goodsList

        // 修改数组原有的对象名
        let newArr= JSON.parse(JSON.stringify(this.filterCategory).replace(/name/g, 'text').
        replace(/id/g, 'value'))

        this.filterCategory=newArr
      })

    },
    onCancel(val){
      this.$router.go(-1)
      // this.$store.commit('changeIsShowPopupShadow',false)
    },
    // 获取搜索数据
    getSearchPupupData(){
      GetSearchPopupData().then(res=>{
        this.placeholder_Val=res.data.defaultKeyword.keyword
        this.historyListData=res.data.historyKeywordList
        this.hotdSearchData=res.data.hotKeywordList
      })
    },
    // 表示输入框内容发生变化时，触发
    onInput(val){
      this.showSearchView=2
      // 发送请求，获取实时更新数据列表
      GetSearchTipList({ keyword:val}).then(res=>{
        this.searchTipListData=res.data
      })
    }
  }
}
</script>

<style lang = "less" scoped>
.search-popup{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  //background-color: rgba(0,0,0,0.5);
  background-color:#efefef;
}
</style>
